<script setup>
import {$ajax, apiUrl} from "@/utils/ajax";
import UploadComponent from "@/components/index/UploadComponent.vue";
import EditorComponent from "@/components/index/EditorComponent.vue";
import ProductTypeCoupon from "@/components/product/ProductTypeCoupon.vue";
import {onMounted, reactive, ref} from "vue";
import router from "@/router";
import {useRoute} from "vue-router";

const editData = reactive({
  id: "",
  name: "",
  prices: "",
  type: "",
  state: 1,
  images: "",
  user_text: '',
  content: "",
  bar_code: ""
})
const rule = reactive({
  name: [
    {required: true, message: "请输入产品名称", trigger: "blur"},
    // {min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur"}

  ],
  prices: [
    {required: true, message: "请输入产品价格", trigger: "blur"},
    // {type: "number", message: "请输入数字", trigger: "blur"},
    // {min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur"}
    {
      validator: (rule, value, callback) => {
        if (isNaN(value) || parseFloat(value) < 0) return callback(new Error("请输入正确的价格"))
        callback()
      }
    }
  ],
  type: [
    {required: true, message: "请选择产品类型", trigger: "blur"}
  ],
  bar_code: [
    {required: true, message: "请输入产品编码", trigger: "blur"},
  ]
})
const loading = ref(false)
const route = useRoute()
const upload_success = ({result}) => {
  // console.log(result)
  editData.images = result.url
  // getProduct()
}
const updateUserText = (dat) => {
  editData.user_text = dat
}

const updateCont = (dat) => {
  editData.content = dat
}
const form = ref()
onMounted(() => {
  // $ajax.get(`${apiUrl}admin/test/test`)
  getProduct()
})
const submitForm = (refs) => {
  refs.validate(err => {
    loading.value = err
    if (err) {
      $ajax.post(`${apiUrl}admin/product/save`, editData).then(() => {
        loading.value = false
        router.replace({name: 'productLst'})
      }).catch(() => {
        loading.value = false
      })
    }
  })
}

const getProduct = () => {
  console.log(route)
  if (route.params.id) {
    // alert()
    $ajax.get(`${apiUrl}admin/product/detail`, {params: {id: route.params.id}}).then(({data: {result}}) => {
      // editData.splice(0, editData.length, ...result)
      for (let i in editData) {
        editData[i] = result[i] || ''
      }
    })
  }
}
</script>

<template>
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name: 'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{name: 'productLst'}">产品管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{ editData.id ? '编辑' : '新增' }}产品</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-form :model="editData" label-position="left" :rules="rule" label-width="100px" ref="form" class="form-data" @keyup.enter="submitForm(form)">
    <el-form-item label="产品名称" prop="name">
      <el-input v-model="editData.name" placeholder="请输入产品名称" clearable/>
    </el-form-item>
    <el-form-item label="产品价值" prop="prices">
      <el-input v-model="editData.prices" placeholder="请输入产品价格" clearable>
        <template #append>元</template>
      </el-input>
    </el-form-item>
    <el-form-item label="产品编码" prop="bar_code">
      <el-input v-model="editData.bar_code" placeholder="请输入产品编码" clearable/>
      <el-text type="info" style="flex: 100%">供货商提供的产品编码，用于区分发货渠道，编码填写规则：渠道码-渠道产品码</el-text>
    </el-form-item>
    <el-form-item label="产品类型" prop="type">
      <el-select v-model="editData.type" placeholder="请选择产品类型" @change="editData.user_text = ''">
        <el-option label="虚拟卡券" :value="1"/>
        <el-option label="实物商品" :value="2"/>
        <el-option label="第三方跳转激活" :value="3"/>
        <el-option label="券码产品" :value="4"/>
      </el-select>
    </el-form-item>
    <!--    {{ editData.user_text }}-->
    <el-form-item label="补充信息" v-if="editData.type === 1 ||editData.type === 3">
      <product-type-coupon :user-text="editData.user_text" v-if="editData.type === 1" @change="updateUserText"/>
      <el-input v-else v-model="editData.user_text" placeholder="请输入产品激活链接"/>
    </el-form-item>
    <el-form-item label="产品图">
      <upload-component :upload-path="`${apiUrl}upload/product_image`"
                        file_name="product" :show-file-list="false" @upload-success="upload_success"
                        rule="^(image)\/.+$"
                        :imageUrl="editData.images" :upload-id="{file_name:'product'}" image-cls="vea-upload-max220"
                        tips="建议尺寸：700*450"/>
    </el-form-item>
    <el-form-item label="产品描述">
      <editor-component :its="editData.content" @editor="updateCont"/>
    </el-form-item>
    <el-form-item>
      <el-button class="edit-btn" round type="primary" :loading="loading" @click="submitForm(form)">
        保存
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="less">

</style>
